<template>
	<page-meta :page-style="'overflow:'+(pageMetaShow?'hidden':'visible')"></page-meta>
	<view class="content" :style="{paddingTop: titleTop + 'px'}">
		<view class="main-title" :style="{height: statusBarHeight+'px'}">
			<image class="addQQIcon" src="@/static/my/addQQIcon.png" mode="widthFix"
				@click="linkUrl('/pages/my/addQQ')"></image>
		</view>
		<view class="userLay flexCenter">
			<view class="userleft" @click="toggle('img')">
				<image :src="userInfoData.avatar|completeUrl" mode="aspectFill">
				</image>
			</view>
			<view class="userRight">
				<view class="titleLay flexCenter" @click="toggle('txt')">
					<!-- @click="linkUrl('/pages/my/setting')"> -->
					<text class="name">{{userInfoData.nickname||'无'}}</text>
					<view class="hr"></view>
					<text class="qq">QQ: {{userInfoData.qq||'无'}}</text>
				</view>
				<!-- <view class="nickName flexCenter" @click="toggle('txt')">
					<view class="nickNameTxt">
						{{userInfoData.username||'无'}}
					</view>
					<image src="/static/my/updateIcon.png" mode="widthFix"></image>
				</view> -->
				<view class="vipAndNumber flexCenter">
					<image class="vipImg" :src="userInfoData.icon||'/static/my/vip.png'" mode="widthFix"></image>
					<view class="record flexCenter">
						<view class="recordTitle" @click="linkUrl('/pages/my/DetailOfAccumulation')">
							累计消费：
						</view>
						<view class="recordNumber">
							<text>￥</text>
							{{lookType?userInfoData.consumption_total||'0':"**"}}

						</view>
						<view class="recordType" @click="lookTypeFn">
							<uni-icons :type="lookType?'eye-filled':'eye-slash-filled'" size="20"
								color="#BDBDBD"></uni-icons>
						</view>
					</view>
					<!-- eye-filled -->
					<!-- eye-slash-filled -->
				</view>
				<view class="expLay">
					<!-- <progress :percent="pgList" activeColor="#FF9CBB"
					 backgroundColor="#FFCCCC" active stroke-width="3" 
					 border-radius='2'	/> -->
					<slider :min="userInfoData.user_level.min_points" :max="userInfoData.user_level.max_points"
						:value="userInfoData.points" disabled activeColor="#FF9CBB" backgroundColor="#FFCCCC"
						blockSize="8" blockColor="#FF9CBB" />
					<view class="expTxt">
						还差{{userInfoData.user_level.max_points - userInfoData.points}}成长值升级VIP{{userInfoData.next_level.name }}
					</view>
				</view>
			</view>
		</view>
		<view class="numberLay flexCenter">
			<!-- @click="shareToggle"> -->
			<view class="numberItem">
				<view class="number">{{userInfoData.pack_count}}</view>
				<view class="title">已有图片</view>
			</view>
			<view class="numberItem" @click="linkUrl('/pages/my/involved')">
				<view class="number">{{userInfoData.followed_shops_count}}</view>
				<view class="title">关注店铺</view>
			</view>
			<view class="numberItem">
				<view class="number">657</view>
				<view class="title">我的粉丝</view>
			</view>
		</view>
		<view class="slideshowLay">
			<liu-slide-img :borderRadius="34" :heightNumber='286' :list="imgList" :autoplay="autoplay"
				:interval="interval" @change="change" @click="click">></liu-slide-img>
		</view>
		<view class="navLay flexCenter">
			<view class="navItem" @click="linkUrl('/pages/my/addTB')">
				<image src="/static/my/tb.png" mode="aspectFit" style="width: 44upx; height: 44upx;"></image>
				<view class="title">绑定TB</view>
			</view>
			<view class="navItem" @click="linkUrl('/pages/my/setting')">
				<image src="/static/my/zh.png" mode="aspectFit" style="width: 42upx; height: 42upx;"></image>
				<view class="title">账号与绑定</view>
			</view>
			<view class="navItem" @click="linkUrl('/pages/my/claimBenefits')">
				<image src="/static/my/zf.png" mode="aspectFit" style="width: 46upx; height: 46upx;"></image>
				<view class="title">参与转浮</view>
			</view>
			<view class="navItem" @click="linkUrl('/pages/my/consumptionRecord/consumptionRecord')">
				<image src="/static/my/xf.png" mode="aspectFit" style="width: 42upx; height: 40upx;"></image>
				<view class="title">消费记录</view>
			</view>
			<view class="navItem" @click="linkUrl('/pages/my/ranking')">
				<image src="/static/my/bd.png" mode="aspectFit" style="width: 48upx; height: 42upx;"></image>
				<view class="title">喵气榜</view>
			</view>
			<view class="navItem" @click="linkUrl('/pages/my/lotteryDraw')">
				<image src="/static/my/dj.png" mode="aspectFit" style="width: 46upx; height: 42upx;"></image>
				<view class="title">大奖期期抽</view>
			</view>
			<view class="navItem" @click="linkUrl('/pages/my/help')">
				<image src="/static/my/kf.png" mode="aspectFit" style="width: 52upx; height: 42upx;"></image>
				<view class="title">帮助中心</view>
			</view>
			<view class="navItem" @click="linkUrl('/pages/my/partner')">
				<image src="/static/my/hz.png" mode="aspectFit" style="width: 32upx; height: 44upx;"></image>
				<view class="title">商家合作</view>
			</view>
			<view class="navItem" @click="popupMao">
				<image src="/static/my/id.png" mode="aspectFit" style="width: 42upx; height: 28upx;"></image>
				<view class="title">喵喵ID卡</view>
			</view>
		</view>

		<uni-popup ref="popup" @change="changePopup" safeArea background-color="#fff" borderRadius="38px 38px 0 0">
			<view class="popup-content">
				<template v-if="popupType=='img'">
					<view class="option" @click="viewAvatar">
						查看头像
					</view>
					<view class="option" @click="chooseMedia">
						从相册选择
					</view>
				</template>
				<template v-if="popupType=='txt'">
					<view class="option" @click="linkUrl('/pages/my/nickname')">
						修改我的昵称
					</view>
				</template>
				<view class="clear" @click="closePop">
					取消
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupMao" @change="changePopup" safeArea>
			<!-- background-color="#fff" borderRadius="38px 38px 0 0"> -->
			<view class="popup-content_Mao">
				<view class="head">
					<image src="/static/my/clearIcon.png" class="clearIcon" mode="widthFix" @click="maoToggle"></image>
				</view>
				<view class="wray">
					<image src="/static/my/ID_CARD.png" class="ID_CARD" mode="widthFix"></image>
					<view class="content">
						<view class="userImg">
							<image :src="userInfoData.avatar|completeUrl" mode="aspectFill" class="userAvatar"></image>
							<image :src="userInfoData.icon||'/static/my/vip.png'" class="vipIcon" mode="widthFix">
							</image>
						</view>
						<view class="userText">
							<view class="option">
								<view class="lable">
									姓名
								</view>
								<view class="value">
									{{userInfoData.nickname||'无'}}
								</view>
							</view>
							<view class="option">
								<view class="lable">
									QQ
								</view>
								<view class="value">
									{{userInfoData.qq||'无'}}
								</view>
							</view>
							<view class="option">
								<view class="lable">
									拥有图片
								</view>
								<view class="value imgNum">
								{{userInfoData.pack_count}}
								</view>
							</view>
							<view class="option">
								<view class="lable">
									注册时间
								</view>
								<view class="value">
								{{userInfoData.created_at.substring(2, 10)}}
								</view>
							</view>
							<view class="option">
								<view class="lable">
									平台ID
								</view>
								<view class="value">
								{{userInfoData.user_id}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 分享示例 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff" borderRadius="38px 38px 0 0">
			<view class="shareContent">
				<view class="titleLay">
					<view class="title">
						分享给
					</view>
					<view class="clearBox" @click="closeSharePop">
						<uni-icons type="closeempty" color="#999999" size="16"></uni-icons>
					</view>
				</view>
				<view class="shareLay">
					<view class="shareItem">
						<image></image>
						<view class="title">QQ好友</view>
					</view>
					<view class="shareItem">
						<image></image>
						<view class="title">下载分享二维码</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<tabbar :current="currentTab"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 2,
				pageMetaShow: false,
				pgList: 20,
				imgList: [{
						src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg"
					},
					{
						src: "https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg"
					},
					{
						src: "https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png"
					}
				],
				autoplay: true,
				interval: 3000,
				popupType: '',
				userInfoData: {},
				lookType: false,
			}
		},
		onReady() {},
		onLoad() {
			this.lookType = uni.getStorageSync('lookType') || false;
			this.getUserInfoFn();
			this.getSliderFn();
			// this.popupMao();
		},
		async onShow() {

		},
		// onShareAppMessage(res) {
		// 	return {
		// 		title: "给你分享了一份宝藏，快进来看看～",
		// 		path: '/pages/index/index',
		// 		imageUrl: '../../static/share.png'
		// 	};
		// },
		methods: {
			lookTypeFn() {
				this.lookType = !this.lookType;
				uni.setStorageSync('lookType', this.lookType);
			},
			//当前轮播索引
			change(e) {
				// console.log('==========', e)
			},
			//点击轮播
			click(e) {
				console.log('点击轮播', e)
			},
			linkUrl(url) {
				console.log(url, "路由");
				uni.navigateTo({
					url: url,
					success: res => {
						this.closePop();
						this.closeSharePop();
					},
					fail: () => {},
					complete: () => {},
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.getUserInfoFn()
						}
					}
				});
			},
			changePopup(e) {
				this.pageMetaShow = e.show
			},
			toggle(type) {
				this.popupType = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('bottom')
			},
			closePop() {
				this.$refs.popup.close()
			},
			closeSharePop() {
				this.$refs.share.close()
			},
			shareToggle() {
				this.$refs.share.open()
			},
			popupMao() {
				this.$refs.popupMao.open('left');
			},
			maoToggle() {
				this.$refs.popupMao.close()
			},
			// 查看头像
			viewAvatar() {
				this.closePop();
				// 预览图片
				uni.previewImage({
					urls: [this.$options.filters.completeUrl(this.userInfoData.avatar)],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 上传头像
			chooseMedia() {
				let that = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					camera: 'back',
					success(res) {
						that.$showLoading();
						console.log(res.tempFiles);
						that.$uploadImage(res.tempFiles[0].tempFilePath).then(res1 => {
							console.log(res1, "图片的");
							let res2 = JSON.parse(res1);
							debugger
							if (res2.code == 0) {
								that.userInfoData.avatar = res2.data.path;
								that.updateUserInfo();
							} else {
								that.$showToast(res2.msg);
							}
							that.closePop()
						});
					}
				})
			},
			// 获取用户信息
			getUserInfoFn() {
				this.$http('/v1/auth/profile').then(res => {
					console.log(res, "获取用户信息");
					uni.setStorageSync('userInfo', res.data);
					this.userInfoData = res.data;
				})
			},
			updateUserInfo() {
				this.$http('/v1/users/update-info', {
					...this.userInfoData
				}, 'POST').then(res => {
					console.log(res);
					if (res.code == 0) {
						this.$showToast('修改成功');
					} else {
						this.$showToast(res.msg)
					}
				})
			},

			// 轮播图
			getSliderFn() {
				this.$http('/v1/home/slides', {
					type: 1
				}).then(res => {
					console.log(res);
					this.imgList = res.data;
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F2F6;
	}
</style>
<style lang="scss" scoped>
	.flexCenter {
		@include flexLayout(center);
	}

	.main-title {
		/*必要 对齐胶囊按钮*/
		@include flexLayout(center);
		padding-left: 30upx;

		.addQQIcon {
			@include setwh(182upx, 0);
		}
	}

	.userLay {
		@include setwh(688upx);
		margin: 32upx auto 0;

		.userleft {
			margin-right: 20upx;

			image {
				background-color: #F8F2F6;
				@include setwh(180upx, 180upx);
				border-radius: 50%;
				border: 2upx solid #E095BA;
			}
		}

		.userRight {
			flex: 1;

			.titleLay {
				margin-bottom: 40upx;

				.name {
					@include lineOver();
					max-width: calc((100% - 66upx)/2);
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: bold;
					font-size: 34rpx;
					color: #272727;
					line-height: 50rpx;
				}

				.hr {
					@include setwh(4rpx, 32rpx);
					background: #FFCCCC;
					border-radius: 2rpx;
					margin: 0 28upx 0 34upx;
				}

				.qq {
					@include lineOver();
					max-width: calc((100% - 66upx)/2);
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 23rpx;
					color: #888484;
					line-height: 32rpx;
				}
			}

			.nickName {
				margin-bottom: 4upx;

				.nickNameTxt {
					@include lineOver();
					max-width: 80%;
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 23rpx;
					color: #979797;
					line-height: 32rpx;
				}

				image {
					@include setwh(16upx, 0);
					margin-left: 10upx;
				}
			}

			.vipAndNumber {
				.vipImg {
					width: 122upx;
					height: 0;
				}

				.recordTitle {
					font-family: QTxiaotu;
					font-size: 31rpx;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					// 字体渐变
					color: transparent;
					-webkit-background-clip: text;
					background-clip: text;
					background-image: linear-gradient(90deg, #E095BA 0%, #FCADCC 100%);
				}

				.recordNumber {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: bold;
					font-size: 31rpx;
					color: #F1516D;
					line-height: 46rpx;

					text {
						font-size: 26rpx;
					}
				}

				.recordType {
					padding-left: 20upx;
				}
			}

			.expLay {
				@include setwh(330upx);

				slider {
					margin: 0;
				}

				.expTxt {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 18rpx;
					color: #FFB6CD;
					line-height: 25rpx;
				}
			}
		}
	}

	.numberLay {
		width: 85%;
		margin: 34upx auto 45upx;

		.numberItem {
			flex: 1;
			text-align: center;

			&:nth-child(2) {
				border-left: 2upx solid #FFCFDF;
				border-right: 2upx solid #FFCFDF;
			}

			.number {
				font-family: SourceHanSansSC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
				line-height: 40rpx;
				margin-bottom: 8upx;
			}

			.title {
				font-weight: 500;
				font-size: 16rpx;
				color: #9B9B9B;
				line-height: 21rpx;
			}
		}
	}

	::v-deep .slideshowLay {
		width: 688upx;
		margin: 0 auto 100upx;

		.custom-indicator {
			bottom: 14rpx;
		}

		.indicator-item {
			@include setwh(12upx, 12upx);
			opacity: 0.3;
			margin: 0 8rpx;
		}

		.indicator-item-active {
			opacity: 1;
		}
	}

	.navLay {
		width: 688upx;
		margin: 0 auto;
		flex-wrap: wrap;
		justify-content: flex-start; // 左对齐

		.navItem {
			width: 33.33%;
			text-align: center;
			margin-bottom: 50upx;

			image {
				// @include setwh(42upx, 0);
			}

			.title {
				font-family: AlimamaFangYuanTiVF-Regular;
				font-weight: normal;
				font-size: 20rpx;
				color: #000000;
				line-height: 24rpx;
				margin-top: 20upx;
			}
		}
	}

	.popup-content {
		padding-top: 10upx;

		.option {
			padding: 40upx 0 34upx;
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
			border-bottom: 2upx solid #EFEFEF;
			text-align: center;
		}

		.clear {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
			padding: 24upx 0;
			border-top: 16upx solid #F6F6F6;
		}
	}

	.popup-content_Mao {
		width: 750rpx;
		// height: 573rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(162,162,162,0.5);
		border-radius: 24rpx;
		// margin-top: 250upx;
		position: relative;
		padding-bottom: 20upx;
		transform: translateY(-50%);
		top: 50%;
		overflow: hidden;
		.head{
			height: 80rpx;
			background: #FFD6DB;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(162,162,162,0.5);
			border-bottom: 6upx dashed #FF7F8F;
			padding-right: 20upx;
			@include flexLayout(center,	flex-end);
			.clearIcon{
				@include setwh(40upx,40upx);
				
			}
		}
		.wray{
			padding-top: 42upx;
			.ID_CARD{
				@include setwh(350upx,0);
				margin-bottom: 36upx;
				padding-left: 38upx;
			}
			.content{
				@include flexLayout(center,	center);
				.userImg{
					@include flexLayout(center,	center);
					flex-direction:column;
					margin-right: 38upx;
					.userAvatar{
						@include setwh(268upx,268upx);
						border-radius: 50%;
						background-color: #F8F2F6;
					}
					.vipIcon{
						position: relative;
						top: -30upx;
						@include setwh(156upx,0);
					}
				}	
					.userText{
						.option{
							@include flexLayout(center,	space-between);
							min-width: 330upx;
							border-bottom: 4upx solid #FF9595;
							margin-bottom: 12upx;
							padding-bottom: 2upx;
							.lable{
								font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
								font-weight: bold;
								font-size: 30rpx;
								color: #FFA5A5;
								line-height: 34rpx;
							}
							.value{
								font-family: kkt, HanziPenSC;
								font-weight: normal;
								font-size: 32rpx;
								color: #2B2B2B;
								line-height: 46rpx;
							}
							.imgNum{
								color: #FF0000;
							}
						}
					}
			}
		}
	}

	.shareContent {
		.titleLay {
			@include flexLayout(center,
				space-between);
			padding: 20upx 50upx 62upx;

			.title {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}
		}

		.shareLay {
			@include flexLayout(center, space-between);
			margin-bottom: 56upx;

			.shareItem {
				width: 50%;
				text-align: center;

				image {
					background-color: #666;
					@include setwh(100upx, 100upx);
					border-radius: 50%;
				}

				.title {

					font-family: AlimamaFangYuanTiVF;
					font-weight: 300;
					font-size: 26rpx;
					color: #000000;
					margin-top: 26upx;
				}

				.clearBox {
					@include flexLayout(center, center);
					@include setwh(46upx, 46upx);
					background-color: #EDEDED;
					border-radius: 50%;

				}
			}
		}
	}
</style>